const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const process=require("process");
const webpackbar=require("webpackbar");
const { VueLoaderPlugin } = require('vue-loader')
const Mock=require("mockjs");
const axios=require("axios");
const data=Mock.mock({
    "list|10":[{
        "img":"@image(100x100,@color)",

    }]
})
console.log(data);
//抽离css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports={
    entry: './str/list.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean:true,
  },
  plugins: [
   
    new HtmlWebpackPlugin({template: './str/index.html'}),
    //
    new MiniCssExtractPlugin({filename:"style.css"}),
    new webpackbar(),
    //热更新
    new webpack.HotModuleReplacementPlugin({
        // Options...
      }),
      new VueLoaderPlugin()
  ],
  mode:process.env.NODE_ENV === 'production' ? 'production' : 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.(scss|css)$/,
        use: [{
            loader:  MiniCssExtractPlugin.loader// 将 JS 字符串生成为 style 节点
        }, {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
        }, {
            loader: "sass-loader" // 将 Sass 编译成 CSS
        }]
      },
      //
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
     
    ]
  }, 
  resolve:{
        alias: {
          Utilities: path.resolve(__dirname, 'src/css'),
          Templates: path.resolve(__dirname, 'src/img'),
        },
        extensions: ['.js', '.json', '.wasm',".jpg"],

  },
  devServer:{
      host:"localhost",
      hot:true,
      port:8000,
      open:true,
      
      before(app){
          app.get("/list",(req,res)=>{

              res.send(data.list);
          })
      }
  },
  //
  devtool :"eval"
}